{% extends 'mathesar/login_base.html' %}
{% load i18n static %}

{% block h1 %}{% translate "Update Your Password" %}{% endblock %}

{% block box_content %}
  {% if validlink %}
    <p>{% translate "Since your password was set by an administrator, you need to update your password to continue." %}</p>
    <form method="post" onsubmit="showLoadingStatus('Updating...');">
      {% csrf_token %}
      <div class="labeled-input layout-stacked">
        <label for="id_new_password1" class="label-component">
          <span class="label-content">
            <span class="labeled-input-label">{% translate "New Password" %}</label>
            <span class="labeled-input-slot input">
              <input
                type="password"
                name="new_password1"
                class="input-element{% if form.new_password1.errors %} has-error{% endif %}"
                value="{% if form.new_password1.value %}{{form.new_password1.value}}{% endif %}"
                autofocus
                autocapitalize="none"
                autocomplete="new-password"
                required
                id="id_new_password1"
              />
            </span>
            {% if form.new_password1.errors %}
              <span class="help error">
                {% for error in form.new_password1.errors %}
                  <span>{{error|escape}}</span>
                {% endfor %}
              </span>
            {% endif %}
          </span>
        </label>
      </div>
      <div class="labeled-input layout-stacked">
        <label for="id_new_password2" class="label-component">
          <span class="label-content">
            <span class="labeled-input-label">{% translate "Confirm" %}</span>
            <span class="labeled-input-slot input">
              <input
                type="password"
                name="new_password2"
                class="input-element{% if form.new_password2.errors %} has-error{% endif %}"
                value="{% if form.new_password2.value %}{{form.new_password2.value}}{% endif %}"
                autofocus
                autocapitalize="none"
                autocomplete="new-password"
                required
                id="id_new_password2"
              />
            </span>
            {% if form.new_password2.errors %}
              <span class="help error">
                {% for error in form.new_password2.errors %}
                  <span>{{error|escape}}</span>
                {% endfor %}
              </span>
            {% endif %}
          </span>
        </label>
      </div>
      <div class="footer">
        <div class="message-box warning-message">
          <div class="icon">&#9432;</div>
          <div>{% translate "After updating your password, you'll need to log in again." %}</div>
        </div>
        <button class="btn btn-primary submit-button" type="submit">
          {% translate "Update Password" %}
        </button>
      </div>
    </form>
  {% else %}
    <p>{% translate "The password reset link was invalid, possibly because it has already been used.  Please request a new password reset." %}</p>
  {% endif %}
{% endblock %}
